<!doctype html>
<html lang="{{ .Language.Lang }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {{ hugo.Generator -}}
    {{ range $.Page.AllTranslations }}
    <link rel="alternate" href="{{ .Permalink }}" hreflang="{{ .Language }}" />
    {{- end }}
    
    {{ $img := "img/apple-touch-icon.png" | relURL -}}
    <link rel="apple-touch-icon" sizes="180x180" href="{{ $img }}"/>
    {{ $img := "img/favicon-32x32.png" | relURL -}}
    <link rel="icon" type="image/png" sizes="32x32" href="{{ $img }}">
    {{ $img := "img/favicon-16x16.png" | relURL -}}
    <link rel="icon" type="image/png" sizes="16x16" href="{{ $img }}">
    {{ $manifest := "site.webmanifest" | relURL -}}
    <link rel="manifest" href="{{ $manifest }}">
    {{ $img := "img/safari-pinned-tab.svg" | relURL -}}
    <link rel="mask-icon" href="{{ $img }}" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="PaleTurquoise">

    {{ $css := "css/picnic.min.css" | relURL -}}
    <link rel="stylesheet" href="{{ $css }}">
    {{ $css := "css/style.css" | relURL -}}
    <link rel="stylesheet" href="{{ $css }}">
    
    <title>{{ i18n .Title }}</title>
  </head>
  <body>
    <div class="top">    
      <div class="languages">
      {{- $this := . -}}
      {{- range $.Site.Home.AllTranslations -}}
        {{- if eq $this.Site.Language .Language }}
        <span class="button" disabled>{{ .Language }}</span>
        {{- else }}
        <a href="{{ .Permalink }}" class="button">{{ .Language }}</a>
        {{- end -}}
      {{- end }}
      </div>
      <div class="header">
        {{ $img := "img/lazpaint_icon.png" | relURL -}}
        <img class="logo" src="{{ $img }}" width="128" height="128" style="float: left" alt="LazPaint logo">
        <h1>LazPaint</h1>
        <p class="lead">{{ i18n "app_description" }}</p>
      </div>
{{ partial "nav.html" . }}
    </div>